<!-- 名片详情 -->
<template>

	<view class="card-detail">
		<view class="card-detail-bg">
			<image class="card-detail-img" :src="dataForm.logo" mode="widthFix"></image>
			<view class="card-detail-user">
				<view class="flex card-detail-user-item">
					<view class="card-detail-user-name u-line-2">
						{{dataForm.name}}
					</view>
					<view class="card-detail-user-de u-line-2">{{dataForm.duties}}</view>
				</view>
				<view class="card-detail-cp">
					{{dataForm.company}}
				</view>
				<view class="exhibition">
					<view class="exhibition-item" @click="collection">
						<u-icon name="e733" size="34" color="#ffffff" custom-prefix="iconfont"
							v-if="dataForm.is_follow=='0'"></u-icon>
						<u-icon name="e732" size="34" color="#ffffff" custom-prefix="iconfont" v-else></u-icon>
						<view class="exhibition-title">{{dataForm.is_follow == 1?'已收藏':'收藏'}}</view>
					</view>
					<view class="exhibition-item">
						<u-icon name="e761" size="34" color="#ffffff" custom-prefix="iconfont"></u-icon>
						<view class="exhibition-title">关注 {{dataForm.my_collection ? dataForm.my_collection : 0}}
						</view>
					</view>
					<view class="exhibition-item">
						<u-icon name="e61a" size="22" color="#ffffff" custom-prefix="iconfont"></u-icon>
						<view class="exhibition-title">浏览 {{dataForm.view_count}}</view>
					</view>
				</view>
			</view>
		</view>



		<view class="box">
			<view class="box-logo flex-c-c" @click="onPhone(dataForm.phone)">
				<image class="box-logo-img" src="../static/brown/ic_phone.png" mode=""></image>
			</view>
			<!-- 联系方式与介绍 -->
			<view class="box-d-s">
				<view class="flex-c-c">
					<view class="company-p-title">联系方式</view>
				</view>
				<view>
					<view class="d-t" v-for="(item,index) in list" :key='index'
						@click="onCopyContent(dataForm[item.value])">
						<view class="flex-c-c">
							<image class="box-d-img" :src="item.icon"></image>
							<view class="box-d-title u-line-1">{{dataForm[item.value]}}</view>
						</view>
						<view class="copy flex-c-c">
							复制
						</view>
					</view>
				</view>
				<view class="box-gn">
					<view class="box-gn-left flex-c-c"  @click="onShare">
						<!-- <button class="share-btn" type="default" open-type='share'></button> -->
						发名片
					</view>
					<view class="box-gn-right flex-c-c" @click="addPhone(dataForm)">
						保存至通讯录
					</view>
				</view>
				<view class="card-details-b">
					<view class=" company-profile" v-if="dataForm.introduce">
						<view class="personal-pdlr30">
							<view class="flex-c-c">
								<view class="company-p-title">介绍</view>
							</view>
							<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word">
								<rich-text selectable :nodes="dataForm.introduce"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="video" v-if="dataForm.video">
				<view class="personal-pdlr30">
					<view class="flex-c-c">
						<view class="company-p-title">视频</view>
					</view>
					<view class="video-v">
						<video id="myVideo" :src="dataForm.video" :danmu-btn='false' enable-play-gesture controls
							object-fit='contain'></video>
					</view>
				</view>
			</view>
			<view class="d-image" v-if="dataForm.imgList">
				<view class="personal-plr30">
					<view class="flex-c-c">
						<view class="company-p-title">图片</view>
					</view>
					<image :src="el" @click="onPreImg(index)"  mode="widthFix" class="del-image" v-for="(el,index) in dataForm.imgList"
						:key='index'></image>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import cardMixin from '../mixins/index.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mixins: [cardMixin],
		data() {
			return {
				list: [{
						icon: require('../static/brown/1.jpg'),
						name: 'qq',
						value: 'qq'
					},
					{
						icon: require('../static/brown/2.jpg'),
						name: '邮箱',
						value: 'email'
					},
					{
						icon: require('../static/brown/phone.jpg'),
						name: '手机',
						value: 'phone'
					},
					{
						icon: require('../static/brown/3.jpg'),
						name: '微信',
						value: 'weixin'

					},
					{
						icon: require('../static/brown/4.jpg'),
						name: '地址',
						value: 'address'
					},

				],
			};
		},
		methods: {
			onPhone(phoneNumber) {
				if (!phoneNumber) {
					uni.showToast({
						title: '请正确设置手机号',
						icon: 'none'
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber,
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-detail {
		background-color: #ffffff;
		width: 100vw;
		min-height: 100vh;
	}

	.card-detail-bg {
		top: 0;
		right: 0;
		position: relative;
		width: 100%;
		// height: 970rpx;
	}

	.card-detail-img {
		width: 100%;
		height: 100%;
	}


	.card-detail-user {
		position: absolute;
		padding: 40rpx 50rpx;
		bottom: 0rpx;
		right: 0;
		width: 100%;
		background-color: #fff;
		background-color: rgba(179, 90, 31, .3);
	}


	.card-detail-user-item {
		display: flex;
		align-items: baseline;
	}


	.card-detail-user-name {
		font-size: 64rpx;
		font-family: PingFangSC;
		font-weight: bold;
		color: #FFFFFF;
		margin-right: 15rpx;
		max-width: 400rpx;
	}

	.card-detail-user-de {
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
		max-width: 280rpx;
	}


	.details-img {
		position: relative;
		width: 690rpx;
		height: 647rpx;
		background: #000000;
		border-radius: 16rpx;
		margin: 0 auto;
		opacity: .4;
	}


	.card-detail-cp {
		word-break:break-all;
		margin-top: 15rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
	}


	.exhibition {
		// padding: 0 20rpx;
		margin-top: 33rpx;
		display: flex;
		// justify-content: space-between;

		.exhibition-title {
			margin-left: 10rpx;
		}

		.exhibition-item {
			display: flex;
			align-items: center;
			color: #fff;
			margin-right: 60rpx;

			.exhibition-img {
				width: 29rpx;
				height: 29rpx;
				margin-right: 9rpx;
			}

			.exhibition-img-see {
				width: 40rpx;
				height: 30rpx;
				margin-right: 9rpx;
			}
		}
	}



	.card-details {
		position: relative;
		padding-top: 1rpx;
		top: -200rpx;
		width: 100%;
		z-index: 30;
	}


	.company-p-title {
		display: inline-block;
		position: relative;
		padding: 40rpx 0;
		margin: 0 auto;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: 700;
		color: #222222;
	}

	.company-p-title::after {
		position: absolute;
		top: 50%;
		left: -100rpx;
		transform: translateY(-50%);
		content: '';
		width: 80rpx;
		height: 2rpx;
		background: #e4e4e4;
	}

	.company-p-title::before {
		position: absolute;
		top: 50%;
		right: -100rpx;
		transform: translateY(-50%);
		content: '';
		width: 80rpx;
		height: 2rpx;
		background: #e4e4e4;
	}



	.mt-30 {
		margin-top: 30rpx;
	}


	.del-image {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 20rpx;
	}



	.d-image {
		border-top: 10rpx solid #f5f5f5;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	video {
		width: 100%;
		height: 100%;
	}

	.personal-pdlr30 {
		border-radius: 16rpx;
		background-color: #fff;
		padding: 0 30rpx 45rpx;
		border-bottom: 10rpx solid #f5f5f5;
	}
	
	.personal-plr30 {
		border-radius: 16rpx;
		background-color: #fff;
		padding: 0 30rpx 45rpx;
	}


	.company-profile {
		background-color: #ffffff;
	}

	.video .personal-pdlr30 {
		border-bottom: 0;
	}



	.video-v {
		width: 100%;
		height: 388rpx;
		border-radius: 10rpx;
		background: #f4f4f4;
	}







	.follow-title {
		font-size: 24rpx;
	}

	.flex {
		display: flex;
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}



	.share-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
	}


	.user-card {
		position: absolute;
		width: 631rpx;
		background: #FFFFFF;
		bottom: 50rpx;
		left: 50%;
		padding: 70rpx 30rpx 27rpx;
		transform: translateX(-50%);
		border-radius: 16rpx;

		.user-card-logo {
			position: absolute;
			left: 51rpx;
			top: -55rpx;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}

		.user-card-title {
			display: flex;
			align-items: baseline;
			margin-bottom: 25rpx;

			.user-card-title-name {
				display: inline-block;
				font-size: 50rpx;
				font-family: PingFangSC;
				font-weight: 700;
				color: #222222;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				max-height: 150rpx;
			}

			.user-card-title-zw {
				color: #fff;
				font-size: 24rpx;
				background: #46CDC6;
				padding: 3rpx 15rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				max-width: 300rpx;
				height: 38rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}

	.card-details-b {
		position: relative;
		// padding: 0 30rpx;
	}

	.user-info {

		.user-info-item {
			display: flex;
			align-items: center;
			padding-bottom: 27rpx;

			.user-info-item-title {
				// width: 300rpx;
				flex: 1;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.user-info-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 15rpx;
			}
		}

		.user-info-item:nth-of-type(2) {
			border-bottom: 1rpx solid #E4E4E4;
		}

	}

	.user-function {
		display: flex;
		justify-content: space-around;
		margin-top: 22rpx;

		.user-function-item {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			flex: 1;

			.user-function-img {
				width: 58rpx;
				height: 58rpx;
				margin-bottom: 17rpx;
			}
		}


	}

	.box-d-s {
		background-color: #fff;
	}

	.d-t {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 48rpx;
		align-items: center;

		.d-t-img {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.box-gn {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.box-gn-left {
			position: relative;
			width: 310rpx;
			height: 70rpx;
			background: #B35A1F;
			border-radius: 8rpx;
			color: #fff;
		}

		.box-gn-right {
			width: 310rpx;
			height: 70rpx;
			background: #FFFFFF;
			border: 1px solid #B35A1F;
			border-radius: 8rpx;
			color: #B35A1F;
		}
	}

	.box-bottom {
		background-color: #fff;
	}

	.box {
		position: relative;
		top: -20rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.box-d-img {
		width: 42rpx;
		height: 42rpx;
		margin-right: 15rpx;
	}

	.copy {
		width: 90rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 1px solid #B35A1F;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #B35A1F;
	}

	.box-d-title {
		width: 450rpx;
	}

	.box-logo {
		position: absolute;
		right: 50rpx;
		top: -50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #B35A1F;
		z-index: 999;
		box-shadow: 0 0 15rpx 0 rgba(179, 90, 31, .1);
	}

	.box-logo-img {
		width: 50rpx;
		height: 50rpx;
	}
</style>
